<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>募派</title>
    <link type="text/css" rel="stylesheet" href="index.css">
    <script type="text/javascript">
        window.onload = function() {
            var actImage = document.getElementById('actImage');
            var list = document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index = 1;
            var len = 3;
            var moved = false;	//若图片正在移动，不能触发翻页功能
            var interval = 3000;
            var timer;

            //图片移动
            function move (offset) {
                if (offset == 0) {
                    return;
                }
        		moved = true;
        		var left = parseInt(list.style.left) + offset;
        		var time = 400;
        		var inteval = 10;
        		var speed = offset/(time/inteval);

		        function go() {
		            if ( (speed>0 && parseInt(list.style.left)<left) || (speed<0 && parseInt(list.style.left)>left) ) {
		                    list.style.left = parseInt(list.style.left) + speed + 'px';
			                setTimeout(go, inteval);
		            }else{
		                list.style.left = left + 'px';
			            if (left > 0) {
			                list.style.left = -1300 * len + 'px';
		                }
                    	if (left< (-1300 * len)) {
                    		list.style.left = '0px';
                        }
                    		moved = false;
                    }
		        }

		        go();
	        }

	        function showButton() {
	            for (var i=0; i<buttons.length; i++) {
		            buttons[i].className = '';
		        }
		        buttons[index-1].className = 'f-on';
	        }

	        //自动播放
	        function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }

            function stop() {
                clearTimeout(timer);
            }

    	    next.onclick = function () {
                if (moved) {
                    return;
                }
                if (index == 4) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                move(-1300);
                showButton();
            }

            prev.onclick = function () {
                if (moved) {
                    return;
                }
                if (index == 1) {
                    index = 4;
                }
                else {
                    index -= 1;
                }
                move(1300);
                showButton();
            }

            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    if (moved) {
                        return;
                    }
                    if (this.className == 'f-on') {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute('index'));
                    var offset = -1300 * (myIndex - index);

                    move(offset);
                    index = myIndex;
                    showButton();
                }
            }

            actImage.onmouseover = stop;
            actImage.onmouseout = play;

            play();
	}
	</script>
</head>
<body class="g-doc">
 	<div class="g-hd">
		<h1 class="m-logo">
			<a href="" class="f-logo">募派LOGO</a>
		</h1>

		<div class="m-login-register">
			<div class="m-login">
				<a href="" class="f-login">登录</a>
			</div>
		 	<div class="m-register">
				<a href="" class="f-register">注册</a>
			</div>
		</div>
    	 </div>
	<div class="m-activity-display" id="actImage">
		<div class="u-act-list" id="list" style="left: 0px">
			<img src="images/1.jpg" alt="1" width="1300px" height="600px"/>
			<img src="images/2.jpg" alt="2" width="1300px" height="600px"/>
			<img src="images/3.jpg" alt="3" width="1300px" height="600px"/>
			<img src="images/4.jpg" alt="4" width="1300px" height="600px"/>
		</div>
		<div class="u-act-buttons" id="buttons">
			<span index="1" class="f-on"></span>
	       		 <span index="2"></span>
	       		 <span index="3"></span>
	       		 <span index="4"></span>
		</div>
		<a href="javascript:;" id="prev" class="u-arrow">&lt;</a>
    		<a href="javascript:;" id="next" class="u-arrow">&gt;</a>
		<!--
		<span><h1>活动展示区</h1></span>
		<button class="u-buy">我要购买</button>
		-->
	</div>
	<div class="m-longterm-display">
		<h1>长期物品展示区</h1>
        <ul class="m-items">
            <li class="m-item">
               <a href="">
                  <img src="images/things1.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things2.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things3.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things4.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things5.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things1.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things2.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things3.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things4.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things5.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things1.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            <li class="m-item">
               <a href="">
                  <img src="images/things2.png" width="230px" height="270px" />  
               </a> 
               <div class="u-info">
                    <div class="u-border">
                        <div class="u-price">
                            <span>15</span>
                        </div>
                        <div class="u-place">
                            <span>郑州轻工业学院</span>
                        </div>
                    </div>
                    <div class="u-name">
                        <a href="">小说</a>
                    </div>
                    <div class="u-status">
                        <span>未认证</span>
                    </div>
                </div>    
            </li>
            
        </ul>
	</div>
	<div class="g-ft">
		<span><h1>关于我们</h1></span>
	</div>
</body>
</html>
